<template>
	<w-container id='order-submit' class='page-bg pa-16' :loading="loading">
		<w-navbar navType="default" id="my-nav" title="确认订单"></w-navbar>
		<view class="bg-color-item flex pa-8 br-8 mb-16">
			<w-image radius="8" :src="product.listimg" width="83" height="83"></w-image>
			<view class="flex-1 plr-16 ptb-4 flex-dir-col flex flex-js-sb">
				<text class="font-color-textPrimary text-overflow-2">{{product.name}}</text>
				<view class="font-color-minor flex-js-end flex">
					<!-- <view class="flex flex-ai-center">
						<w-icon :name="count<=1? 'minus-disable':'minus-active'" size="18" @click='minus'></w-icon>
						<input v-model="count" type="number" @input="changeCount" class="plr-4 font-color-textPrimary"
							style="width: 80rpx;text-align: center;" />
						<w-icon :name="count==maxCount? 'add-disable':'add-active'" size="18" @click='add'></w-icon>
					</view> -->
					<view class="flex flex-ai-center" style="height: 61rpx;border-radius: 100rpx;border: 1rpx solid #666;">
						<view class="pa-10"><w-icon :name="count<=1? 'minus-disable':'minus-active'" size="26" @click='minus'></w-icon></view>
						<input v-model="count" type="number" @input="changeCount" class="plr-4 font-color-textPrimary"
							style="width: 126rpx;text-align: center;border-left: 1rpx solid #666;border-right: 1rpx solid #666;" />
						<view class="pa-10"><w-icon :name="count==maxCount? 'add-disable':'add-active'" size="26" @click='add'></w-icon></view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="pa-16 bg-color-item br-12 mb-16"  v-if="info.type==30">
			<view class="flex flex-dir-col flex-ai-center" v-if="!addressList.length || !addressId">
				<text class="font-size-14 font-color-textPrimary font-w-500">您还未添加收货地址</text>
				<w-button class="mt-12" style="width: 480rpx;" size="sm" :pain="true" @click="toChoose">
					<!-- <w-icon name="plus" color="#e26f1b" class="mr-8"></w-icon> -->
					立即添加</w-button>
			</view>
			<view class="flex flex-ai-center" v-if="address" @click="toChoose">
				<view class="flex-1">
					<view class="font-w-bold font-size-16" style="color: #505050;">
						{{addressText}}
					</view>
					<view class="font-size-10 mt-10">
						<text class="font-color-convention">{{address.name}}</text>
						<text class="font-color-minor ml-8">{{address.mobile}}</text>
					</view>
				</view>
				<w-icon name="right" size="24"></w-icon>
			</view>
		</view>


		<view class="br-8 bg-color-item pa-8 mtb-16">
			<view class="flex flex-js-sb font-size-14 mb-16"
				v-if="product.publisher&&product.publisher.user&&product.publisher.user.nickname">
				<text class="font-color-minor">创作者:</text>
				<text class="font-color-textPrimary">{{product.publisher.user.nickname}}</text>
			</view>
			<view class="flex flex-js-sb font-size-14 mb-16" v-if="product.goods_type==2">
				<text class="font-color-minor">藏品编号:</text>
				<text class="font-color-textPrimary">随机编号</text>
			</view>
			<view class="flex flex-js-sb font-size-14 mb-16 flex-ai-center" v-if="userInfo.ntf_url">
				<text class="font-color-minor">区块链地址:</text>
				<text class="font-color-textPrimary flex-1 text-right">{{userInfo.ntf_url|hideUrl}}</text>
				<w-icon name="copy-dark" size='20' @click='copy'></w-icon>
			</view>
			<view class="flex flex-js-sb font-size-14  flex-ai-center">
				<text class="font-color-minor">订单金额:</text>
				<view class="flex flex-ai-end">
					<text class="font-size-10" v-if="count>1">{{info.crystal_number}}x{{count}}=</text>
					<view class="font-color-textPrimary flex flex-ai-end font-w-500">
						<w-icon :name="crystalIcon(info.crystal_type)" size="19"></w-icon>
						{{totalPrice}}
					</view>
				</view>
			</view>
		</view>


		<view class="ptb-28 plr-16 bg-color-item br-12">
			<view class="flex flex-ai-center flex-js-sb">
				<view class="flex flex-ai-center">
					<w-icon :name="crystalIcon(info.crystal_type)" size="19"></w-icon>
					<text class="ml-12 font-color-textPrimary">{{info.crystal_type|formatPriceName}}</text>
					<text class="font-size-12 font-color-minor ml-4">(剩余{{balance}})</text>
				</view>
				<w-icon name="checkmark-circle-fill" size='16' color='#e26f1b'></w-icon>
			</view>
		</view>
		
		
		<view class="action bg-color-pageBg">
			<view class="btns flex flex-ai-center plr-16 flex-js-sb">
				<view class=" font-color-textPrimary price flex flex-ai-center">
					<w-icon :name="crystalIcon(info.crystal_type)" size="19"></w-icon>
					<text class="font-size-20 ml-4">{{totalPrice}}</text>
				</view>
				<w-button shape="circle" style='width: 480rpx;' :disabled="disable" @click="pwdPop=true">立即兑换</w-button>
			</view>
		</view>
		
		<!-- 兑换密码验证 -->
		<password-authentification 
		ref="pwdAuth" 
		v-model="pwdPop"
		type="exchange"
		:sj="{'icon':crystalIcon(info.crystal_type),'num':totalPrice}"
		@finish="exchange"
		></password-authentification>
		
		<!-- 密码错误 -->
		<w-toast 
		v-model="pwdPopErr" 
		cancelText="忘记密码"
		submitText="重试"
		title="操作密码错误，请重试" 
		@action="wrongPassword"></w-toast>
	</w-container>
</template>

<script>
	import crystalMixin from '@/mixins/crystalMixin.js'
	import {address_list} from '@/api/address/index.js'
	import {exchange} from '@/api/shop/shop.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		mixins: [crystalMixin],
		data() {
			return {
				loading: false,
				count: 0,
				info: {
					product: {}
				},
				timer: null,
				addressId:0,
				addressList:[],
				
				pwdPopErr: false,
				pwdPop: false,
				exchangePrice:''
			};
		},
		filters: {
			hideUrl(v) {
				if (!v) return;
				return v.slice(0, 5) + '****' + v.slice(v.length - 5, v.length)
			}
		},
		computed: {
			disable(){
				let isTrue=this.count>0&&this.maxCount>0
				return !isTrue
			},
			product() {
				return this.info.product
			},
			totalPrice() {
				return (this.info.crystal_number * this.count).toFixed(0)
			},
			address(){
				if(this.addressId){
					return this.addressList.find(v=>v.address_id==this.addressId)
				}
				return null;
			},
			addressText(){
				if(this.address){
					let {province,city,area,address}=this.address;
					return province+city+area+address
				}
				return null;
			}
		},
		onShow() {
			this.getInfo();
			this.getBalance()
		},
		onLoad() {
			uni.$on('addressSelect',({address_id})=>{
				this.addressId=address_id;
			})
		},
		methods: {
			exchange(pwd){
				uni.showLoading({
					mask:true,
					title:"兑换中"
				})
				let _this=this;
				exchange({
					goods_id:this.info.id,
					number:this.count,
					address_id:this.addressId,
					pay_password:pwd
				}).then(res=>{
					this.pwdPop = false;
					this.$refs.pwdAuth.$data.pwd = '';
					if (res.data.password_error==1) {
						this.pwdPopErr = true;
						return
					}
					uni.showToast({
						title:res.msg,
						success:()=>{
							setTimeout(()=>{
								uni.redirectTo({
									url:`/pages/order/defaultDetail?id=${res.data.id}&orderType=4`
								})
							},1500)
						}
					})
				}).catch(()=>{ this.pwdPop = false;this.$refs.pwdAuth.$data.pwd = ''; })
			},
			...mapActions('user', ['getUserInfo']),
			getBalance() { //需要更新下用户水晶余额信息
				this.getUserInfo()
			},
			toChoose(){
				this.$u.route('/pages/my/address/list',{action:'select'})
			},
			getInfo() {
				let {
					count,
					info
				} = uni.getStorageSync('exchange');
				this.count = count;
				this.info = info;
				if(info.type==30){
					this.getAddress()
				}
			},
			async getAddress(){
				this.loading = true;
				try{
					let res=await address_list();
					this.addressList=res.data;
					if(this.addressList.length&&!this.addressId){
						this.addressId = this.addressList.find(v=>v.is_default)?.address_id ?? 0
					}
				}catch(err){
					console.log(err)
				}finally{
					this.loading = false;
				}
			},
			changeCount({
				detail
			}) {
				let value = Number(detail.value)
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.count = value
					if (value < 1) {
						this.count = 1
					}
					if (value > this.maxCount) {
						this.count = this.maxCount;
					}
				}, 500)
			},
			minus() {
				if (this.count <= 1) return;
				this.count--
			},
			add() {
				if (this.count == this.maxCount) return;
				this.count++
			},
			copy() {
				this.$tools.copyText(this.userInfo.ntf_url)
			},
			wrongPassword(e) {
				if(!e){
					uni.$u.route('/pages/my/actionPwd/getCode',{action:'reset'})
				}
			}
		}
	}
</script>

<style lang="scss">
.action{
		position: fixed;
		width: 750rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		.btns{
			width: 750rpx;
			height: 120rpx;
		}
		.price{
			font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
			font-weight: 500;
		}
	}
</style>
